<template>
    <!-- Main -->
    <div id="main">
        <div class="inner">
            <section class="tiles">
                <article :class="'style'+(index+1)%16" v-for="nav,index in navs">
                    <span class="image">
                        <img :src="'static/images/pic0'+(index+1)%16+'.jpg'" alt="" />
                    </span>
                    <router-link :to="'nav/'+nav.catId">
                        <h2>{{nav.tagName}}</h2>
                        <div class="content">
                        </div>
                    </router-link>
                   
                </article>
            </section>
        </div>
    </div>
</template>

<script>
import API from '../api/api'
export default {
    name: 'nav',
    data:function(){
        return{
            navs: null
        }
    },
    mounted: function(){
        API.getNavTags().then(function(data){
            console.log(data)
            var arr = [];
            var catIdCache = [];
            data.forEach(function(nav){
                var obj = {
                    catId: nav.attributes.cat_id,
                    tagName: nav.attributes.category
                }
                
                if(catIdCache.indexOf(nav.attributes.cat_id) == -1){
                    arr.push(obj);
                    catIdCache.push(nav.attributes.cat_id)
                }
            })
            this.navs = arr;
        }.bind(this));

    }
}
</script>